<template>
    <div class="question-response-homepage">
        <!-- banner -->
        <swiper-comp></swiper-comp>

        <div style="margin: 10px 0; font-size: 16px;">
            <span style="margin-right: 30px;">已入驻大V</span>
            <a href="#/questionResponse/regist" class="menu-sub-text wake">申请入驻</a>
        </div>

        <ul>
            <li v-for="master in qaMasterList">
                <Card :bordered="false" style="width:320px; text-align:center;">
                    <h3 style="margin-bottom: 10px;">{{master.Name}}</h3>
                    <Card>
                        <p slot="title">简介</p>
                        <p style="text-align: left; height: 63px;overflow: hidden;text-overflow: ellipse;">{{master.Summary}}</p>
                        <p>擅长领域：{{master.QaClassificationID}}</p>
                    </Card>
                    <div style="margin-top: 10px">
                        <a :href="'#/questionResponse/question?id='+ master.QaMasterID + '&name='+ master.Name " class="menu-sub-text wake">
                            <button>向他提问</button>
                        </a>

                        <a :href="'#/questionResponse/response?id='+ master.QaMasterID + '&name='+ master.Name" class="menu-sub-text wake">
                            <button>他的回答</button>
                        </a>
                    </div>
                </Card>
            </li>
        </ul>

        <div>
            <ul class="answer-list-title">
                <li>
                    <a>最新问答</a>
                </li>
                <li>
                    <a>最热问答</a>
                </li>
                <li>
                    <i-input placeholder="搜索"><iclass="fa fa-search"></i></i-input>
                    <a>问题搜索</a>
                </li>
            </ul>
            <div class="answer-list">

            </div>
        </div>

    </div>
</template>
<script type="text/ecmascript-6">

    import getData from '../../../api/getData'
    import swiperComp from '../../home/homeIndex/swiperComp.vue'

    export default {
        components: {
            swiperComp
        },
        data: function () {
            return {
                qaMasterList: []
            }
        },
        created(){
            this.queryQAMasterUserData();
        },
        methods: {
            queryQAMasterUserData(){
                var self = this;
                getData.post("queryQAMasterUserData", {
                    QaClassificationID: '',
                    QaMStates: 1
                }).then(function (response) {
                    if (response.data.code == 0) {
                        var tempData = response.data.data;
                        self.qaMasterList = tempData;
                    } else {
                        self.$Message.info(response.data.msg ? response.data.msg : '网络错误，请稍后重试');
                    }

                })
                .catch(function (response) {
                    self.$Message.info('网络错误，请联系客服');
                });
            },

            applyForJoin(){
                this.$router.push({path: '/questionResponse/regist'});
            }
        }
    }
</script>
<style lang="scss">
    .question-response-homepage{

        .answer-list-title{
            padding: 10px 0;
            border-top: 1px solid #E1E1E1;
            border-bottom: 1px solid #E1E1E1;

            li{
                display: inline-block;
                white-space: nowrap;
                margin-right: 20px;
            }
        }

    }
</style>

